"use client";
import React, { useCallback, useTransition } from "react";
import { DropdownMenuItem } from "./ui/dropdown-menu";
import { deleteProduct, updateProduct } from "../service/products";
import { useRouter } from "next/navigation";
// import { deleteProduct, toggleProductAvailability } from "../actions/products";

export const ActiveToggleDropdownItem = ({ id, isAvailableForPurchase }) => {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  const onClick = useCallback(() => {
    startTransition(async () => {
      console.log(id, isAvailableForPurchase);
      await updateProduct({
        id,
        isAvailableForPurchase: !isAvailableForPurchase,
      });
      router.refresh();
    });
  }, [id, router, isAvailableForPurchase]);
  return (
    <DropdownMenuItem onClick={onClick} disabled={isPending}>
      {isAvailableForPurchase ? "Deactivate" : "Activate"}
    </DropdownMenuItem>
  );
};

export const DeleteDropdownItem = ({ id, disabled }) => {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const onClick = useCallback(() => {
    startTransition(async () => {
      await deleteProduct(id);
      router.refresh();
    });
  }, [id, router]);
  return (
    <DropdownMenuItem
      className=" hover:bg-red-500 focus:bg-red-500 cursor-pointer hover:text-white focus:text-white"
      onClick={onClick}
      disabled={disabled || isPending}
    >
      Delete
    </DropdownMenuItem>
  );
};
